<!--
	震级
	Created by Penglei on 2023/08/17
-->
<template>
	<div class="earthquake-magnitude">
		<!-- <el-radio-group v-model="earthquakeMagnitude" @change="onChange">
			<el-radio v-for="(item, index) in list" :key="index" :label="item.value">{{ item.label || '' }}</el-radio>
		</el-radio-group> -->
		<el-checkbox-group v-model="earthquakeMagnitude" @change="onChange">
			<el-checkbox v-for="(item, index) in list" :key="index" :label="item.value">{{ item.label || '' }}</el-checkbox>
		</el-checkbox-group>
	</div>
</template>

<script setup name="EarthquakeMagnitude">
// 组件事件监听
const emit = defineEmits(['change']);

// 当前类型
let earthquakeMagnitude = ref(['0', '1', '2', '3', '4', '5']); //'0'
// 类型列表
const list = [
	{ label: 'M<4', value: '0' },
	{ label: '4≤M<5', value: '1' },
	{ label: '5≤M<6', value: '2' },
	{ label: '6≤M<7', value: '3' },
	{ label: '7≤M<8', value: '4' },
	{ label: 'M>8', value: '5' },
];
// 选项选择切换事件
const onChange = (value) => {
	// 修改当前类型
	emit('change', value);
}
// 定义抛出内容
defineExpose({ earthquakeMagnitude, onChange });
</script>

<style lang="scss" scoped>
.earthquake-magnitude {
	padding: 20px 5px;
	color: #FFFFFF;

	// 类型选择
	.el-checkbox-group,
	.el-radio-group {
		padding: 0 15px;

		.el-checkbox,
		.el-radio {
			width: 100px;
			color: #FFFFFF;
			font-size: 18px;
			margin-bottom: 12px;
		}

		:deep(.el-checkbox) {
			.el-checkbox__inner {
				width: 21px;
				height: 21px;

				&::after {
					height: 12px;
					width: 8px;
				}
			}

			.el-checkbox__label {
				font-size: 18px;
			}
		}
	}
}
</style>